<template>
  <a-spin :spinning="loading">
    <template v-if="1">
      <div class="chart-container">
        <MapView ref="marsMap" :key="mapViewKey" :areaId="areaId" :mapUrl="mapUrl" :geoUrl="geoUrl" @onload="onMapload"
          @onSaveData="onSaveData" @onSaveInfo="onSaveInfo" />
      </div>
      <!-- <BasicTree ref="basicTree" class="area-rule-tree" checkable :treeData="treeData" :checkedKeys="checkedKeys"
        :selectedKeys="selectedKeys" :expandedKeys="expandedKeys" :checkStrictly="checkStrictly"
        style="height: 500px; overflow: auto" @check="onCheck" @expand="onExpand" @select="onSelect">
        <template #title="{ slotTitle, ruleFlag }">
          <span>{{ slotTitle }}</span>
          <Icon v-if="ruleFlag" icon="ant-design:align-left-outlined" style="margin-left: 5px; color: red" />
        </template>
      </BasicTree> -->
    </template>
    <a-empty v-else description="暂无地图" />

    <div class="j-box-bottom-button offset-20" style="margin-top: 30px">
      <div class="j-box-bottom-button-float" :class="[`${prefixCls}`]">
        <a-button type="primary" preIcon="ant-design:save-filled" @click="onSubmit">保存</a-button>
      </div>
    </div>
  </a-spin>
</template>

<script lang="ts" setup>
import { watch, computed, inject, ref, nextTick } from 'vue';
import { queryArea, queryGeoJson, saveGeoJson } from '../area.api';
import { useDesign } from '/@/hooks/web/useDesign';
import MapView from '@/components/mars-work/main-view.vue';
// import * as mars2d from 'mars2d';
import { useRoute } from 'vue-router';

const { prefixCls } = useDesign('j-area-form-content');
const props = defineProps({
  data: { type: Object, default: () => ({}) },
});
// 当前选中的部门ID，可能会为空，代表未选择部门
const areaId = computed(() => props.data?.id);
console.log('area1 props:', areaId.value)
const refreshCounter = ref(0);
const mapViewKey = computed(() => `${areaId.value}_${refreshCounter.value}`);

const loading = ref<boolean>(false);
const map = ref(null);
const route = useRoute();

// onCreated
loadData();
watch(areaId, () =>
// loadAreaPermission(),
{
  console.log('area2 props:', areaId.value)
  immediate: true;
  loadData();
}
);

function refreshMapView() {
  refreshCounter.value++;
}

const domainUrl = import.meta.env.VITE_GLOB_DOMAIN_URL;

const geoUrl = computed(() => {
  return domainUrl + `/open/hardware/area/geo_json/query?id=${areaId.value}&type=area`;
});
const mapUrl = `${process.env.BASE_URL}config/config.json?time=${new Date().getTime()}`;
// const geoUrl = `${process.env.BASE_URL}config/geo.json?time=${new Date().getTime()}`;

async function loadData() {
  try {
    loading.value = true;
    // let { treeList } = await queryRoleTreeList();
    // treeData.value = treeList;

    let params = {
      areaId: areaId.value,
      resultType: 'unique',
    };
    const result = await queryArea(params);
    console.log('查询地块详情', result);

    await nextTick();
  } finally {
    loading.value = false;
  }
}

async function onSubmit() {
  try {
    loading.value = true;
    areaId: areaId.value, await loadData();
    // await loadAreaPermission();
  } finally {
    loading.value = false;
  }
}

// 地图构造完成回调
function onMapload(callbackMap) {

  map.value = callbackMap;

  // let marker = new mars2d.graphic.Marker({
  //   latlng: [27.24195, 105.19148],
  //   style: {
  //     image: '/img/marker/mark1.png',
  //     zIndexOffset: 100000,
  //   },
  // });

  // if (map.value) {
  //   map.value.addLayer(marker);
  // }
}

//  保存geojson
function onSaveData(geojson) {
  let cmd = {
    id: areaId.value,
    geoJson: JSON.stringify(geojson)
  }
  saveGeoJson(cmd);

  loadData();

  refreshMapView()
}

//  保存graphic信息
function onSaveInfo(formState) {

}
</script>

<style lang="less" scoped>
// 【VUEN-188】解决滚动条不灵敏的问题
.area-rule-tree :deep(.scrollbar__bar) {
  pointer-events: none;
}

.chart-container {
  height: calc(100vh - 48px - 44px - 46px - 28px - 53px - 30px);
}
</style>
